<template>
  <div>
    <div id="nav">
      
      
      <router-link to="/home" tag="span">
      <i class="iconfont icon-wode tubiao"></i>
      <i class="txt">首页</i>
      </router-link> 
      
      <router-link to="/person" tag="span">
      <i class="iconfont icon-zhuye tubiao"></i>
      <i class="txt">个人中心</i>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
  
</template> 

<style lang="scss" scoped>
#nav{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // 弹性布局
  display: flex;
  // 两端对齐
  justify-content: space-between;
  background-color: #fff;
  span{
    flex: 1;
    height: 40px;
    border: 1px solid #666;
    // content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    // 如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。
    box-sizing: border-box;
    display: flex;
    // 左右居中 上下居中
    justify-content: center;
    align-items: center;
    &.router-link-active{
      color: red;
    }
    .tubiao{
     font-size: 20px;

    }
    .txt{
      font-size: 8px;
      font-style: normal;

    }
  }
}
</style>
